<template>
    <div>
        <div class="page-header">
            <Row style="margin-bottom: 10px;">
                <Col span="8">
                    <span>姓名：</span>
                    <Input style="width: 80%;" v-model="search_title" placeholder="请输入姓名" @on-change="searchData1"/>
                </Col>
                <Button type="info" @click="filterData"><Icon type="ios-search" /> 搜索</Button>
                <Button type="success" @click="addInfo=true" style="margin-left: 10px">优待证申领</Button>
            </Row>
        </div>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <div>
                        <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange">
                            <template slot-scope="{ row,index }" slot="action">
                                <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看详情</Button>
                                <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row,index)">编辑</Button>
                                <Button v-if="row.state==='待审核'" type="primary" size="small" style="margin-right: 5px" @click="examine(index)">审核</Button>
                                <Modal v-model="modal1" title="详情" @on-ok="modal1 = false" @on-cancel="modal1 = false" width="60">
                                    <div class="detail">
                                        <Row class="p10" style="height: 30px; font-size: 15px">
                                            <Col span="12">
                                                <span class="bold">姓名:</span>
                                                <span>{{dataInfo.name}}</span>
                                            </Col>
                                            <Col span="10">
                                                <span class="bold">联系电话:</span>
                                                <span>{{dataInfo.mobile}}</span>
                                            </Col>
                                        </Row>
                                        <Row class="p10" style="height: 30px; font-size: 15px">
                                            <Col span="12">
                                                <span class="bold">家庭住址:</span>
                                                <span>{{row.address}}</span>
                                            </Col>
                                            <Col span="12">
                                                <span class="bold">编号:</span>
                                                <span>{{dataInfo.people_code}}</span>
                                            </Col>
                                        </Row>
                                    </div>
                                    <div slot="footer">
                                        <Button type="primary" size="large"   @click="modal1 = false">确定</Button>
                                    </div>
                                </Modal>
                            </template>
                        </Table>
                    </div>
                </Col>
            </Row>
            <Row type="flex" justify="end" class="lyx-mb10">
                <Col span="12">
                    <Page :total="totalNum" show-total />
                </Col>
            </Row>
        </div>
        <Modal v-model="addInfo" title="优待证申领" @on-ok="addInfo = false" @on-cancel="addInfo = false" width="60">
            <div class="detail">
                <Form :model="formItem" :label-width="200">
                    <FormItem label="姓名">
                        <Input v-model="formItem.name" placeholder="请输入姓名" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="年龄">
                        <Input v-model="formItem.age" placeholder="请输入年龄" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="家庭住址">
                        <Input v-model="formItem.address" placeholder="请输入住址" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="联系电话">
                        <Input v-model="formItem.mobile" placeholder="请输入电话" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="审核状态">
                        <RadioGroup v-model="formItem.state">
                            <Radio label="待审核"></Radio>
                        </RadioGroup>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="ok(formItem)">确定</Button>
            </div>
        </Modal>
        <Modal v-model="editData" title="编辑" @on-ok="editData = false" @on-cancel="editData = false" width="60">
            <div class="detail">
                <Form :model="formItem1" :label-width="200">
                    <FormItem label="姓名">
                        <Input v-model="formItem1.name" placeholder="请输入姓名" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="年龄">
                        <Input v-model="formItem1.age" placeholder="请输入年龄" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="家庭住址">
                        <Input v-model="formItem1.address" placeholder="请输入住址" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="联系电话">
                        <Input v-model="formItem1.mobile" placeholder="请输入电话" style="width: 60%"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="editSure(formItem1)">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      addInfo: false,
      totalNum: 7,
      falg: 'true',
      dataInfo: {},
      formItem: {
        title: '',
        content: '',
        state: '待审核'
      },
      formItem1: {},
      columns4: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '联系方式',
          key: 'mobile'

        },
        {
          title: '家庭住址',
          key: 'address'
        },
        {
          title: '优待证编号',
          key: 'people_code'
        },
        {
          title: '审核状态',
          key: 'state'
        },
        {
          title: '操作',
          slot: 'action',
          width: '200',
          align: 'center'
        }
      ],
      data1: [
        {
          name: '侯宇',
          age: '73',
          mobile: '15567238543',
          address: '辽宁省沈阳市浑南新区',
          people_code: 'YDZ12345',
          state: '待审核'
        },
        {
          name: '何丽',
          mobile: '18907654325',
          age: '71',
          address: '辽宁省沈阳市和平区',
          people_code: 'YDZ12354',
          state: '待审核'
        },
        {
          name: '张红',
          mobile: '13489026542',
          age: '74',
          address: '辽宁省沈阳市大东区',
          people_code: 'YDZ18745',
          state: '待审核'
        },
        {
          name: '王玉洁',
          mobile: '13976500090',
          age: '70',
          address: '辽宁省沈阳市和平区',
          people_code: 'YDZ1544555',
          state: '待审核'
        },
        {
          name: '李玉霞',
          mobile: '13976566600',
          age: '75',
          address: '辽宁省沈阳市沈河区',
          people_code: 'YDZ14945',
          state: '待审核'
        },
        {
          name: '王谷丰',
          mobile: '13653428719',
          age: '72',
          address: '辽宁省沈阳市沈河区',
          people_code: 'YDZ14945',
          state: '待审核'
        },
        {
          name: '王洪林',
          mobile: '13653428719',
          age: '71',
          address: '辽宁省沈阳市沈河区',
          people_code: 'YDZ14945',
          state: '待审核'
        }
      ],
      search_title: '',
      editData: false

    }
  },
  methods: {
    editSure () {
      this.editData = false
    },
    edit (param, index) {
      console.log(param, index, '333333333333')
      this.editData = true
      this.formItem1 = param
    },
    show (index) {
      console.log(index, '2222222222222')
      this.modal1 = true
      this.dataInfo = this.data1[index]
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },
    examine (index) {
      console.log(index, '555555555555')
      if (confirm('确定要通过审核吗？') === true) {
        this.data1[index].state = '已审核'
      }
    },
    filterData () {},
    searchData1 () {},
    ok () {
      this.formItem.people_code = 'YDZ89675'
      console.log(this.formItem)
      if (!this.formItem.name) {
        alert('姓名不能为空')
        return
      }
      if (!this.formItem.mobile) {
        alert('电话不能为空')
        return
      }
      if (!this.formItem.address) {
        alert('住址不能为空')
        return
      }
      alert('操作成功')
      this.addInfo = false
      this.data1.push(this.formItem)
      this.totalNum = this.totalNum + 1
    }

  }
}
</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
